{% extends "base_generic.html" %}
{% block title %}{{ data.gallery_tab }}{% endblock %}
{% block this_css %}
    <link rel="stylesheet" href="/static/home/css/magnific-popup.css" />
{% endblock %}

{% block nav %}
    <ul>
        <li>
            <a href="/"><span class="tm-nav-deco"></span>{{ data.intro_tab }}</a>
        </li>
        <li class="active">
            <a href="/gallery/"><span class="tm-nav-deco"></span>{{ data.gallery_tab }}</a>
        </li>
        <li>
            <a href="/contact/"><span class="tm-nav-deco"></span>{{ data.contact_tab }}</a>
        </li>
    </ul>
{% endblock %}

{% block body %}
        <div class="tm-content tm-content-2">
          {{ data.gallery_desc|safe }}
          <div class="container-fluid">
            <div class="row tm-gallery" id="tmGallery">
              <div class="col-sm-6 tm-gallery-item">
                <figure class="effect-bubba">
                  <img src="/static/home/img/gallery/gallery-img-01.jpg" alt="Gallery item" class="img-fluid" />
                  <figcaption>
                    <h2>Fresh <span>Bubba</span></h2>
                    <p>Bubba likes to appear out of thin air.</p>
                    <a href="/static/home/img/gallery/gallery-img-01.jpg">View more</a>
                  </figcaption>
                </figure>
              </div>
              <div class="col-sm-6 tm-gallery-item">
                <figure class="effect-bubba">
                  <img src="/static/home/img/gallery/gallery-img-02.jpg" alt="Gallery item" class="img-fluid" />
                  <figcaption>
                    <h2>Fresh <span>Bubba</span></h2>
                    <p>Bubba likes to appear out of thin air.</p>
                    <a href="/static/home/img/gallery/gallery-img-02.jpg">View more</a>
                  </figcaption>
                </figure>
              </div>
              <div class="col-sm-6 tm-gallery-item">
                <figure class="effect-bubba">
                  <img src="/static/home/img/gallery/gallery-img-03.jpg" alt="Gallery item" class="img-fluid" />
                  <figcaption>
                    <h2>Fresh <span>Bubba</span></h2>
                    <p>Bubba likes to appear out of thin air.</p>
                    <a href="/static/home/img/gallery/gallery-img-03.jpg">View more</a>
                  </figcaption>
                </figure>
              </div>
              <div class="col-sm-6 tm-gallery-item">
                <figure class="effect-bubba">
                  <img src="/static/home/img/gallery/gallery-img-04.jpg" alt="Gallery item" class="img-fluid" />
                  <figcaption>
                    <h2>Fresh <span>Bubba</span></h2>
                    <p>Bubba likes to appear out of thin air.</p>
                    <a href="/static/home/img/gallery/gallery-img-04.jpg">View more</a>
                  </figcaption>
                </figure>
              </div>
              <div class="col-sm-6 tm-gallery-item">
                <figure class="effect-bubba">
                  <img src="/static/home/img/gallery/gallery-img-05.jpg" alt="Gallery item" class="img-fluid" />
                  <figcaption>
                    <h2>Fresh <span>Bubba</span></h2>
                    <p>Bubba likes to appear out of thin air.</p>
                    <a href="/static/home/img/gallery/gallery-img-05.jpg">View more</a>
                  </figcaption>
                </figure>
              </div>
              <div class="col-sm-6 tm-gallery-item">
                <figure class="effect-bubba">
                  <img src="/static/home/img/gallery/gallery-img-06.jpg" alt="Gallery item" class="img-fluid" />
                  <figcaption>
                    <h2>Fresh <span>Bubba</span></h2>
                    <p>Bubba likes to appear out of thin air.</p>
                    <a href="/static/home/img/gallery/gallery-img-06.jpg">View more</a>
                  </figcaption>
                </figure>
              </div>
            </div>
          </div>
        </div>
{% endblock %}

{% block this_js %}
  <script type="text/javascript" src="/static/home/js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="/static/home/js/jquery.magnific-popup.min.js"></script>
  <script>
    $(document).ready(function () {
      // Magnific Pop up
      // https://dimsemenov.com/plugins/magnific-popup/
      $('.tm-gallery').magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        type: 'image',
        gallery: {
          enabled: true
        },
      });
    });
  </script>
{% endblock %}
